<template>
  <ContainerGroup>
    <Container class="basic-msg">
      <div class="left">
        <div class="text-box">
          <div class="department">{{ patientMsg.deptName }}</div>
          <div class="doctor">医生：{{ patientMsg.emplName }}</div>
          <div class="time">{{ patientMsg.yysj }}</div>
        </div>
      </div>
      <div class="right">
        <div class="patient-name"><span>姓名：</span>{{ patientMsg.name }}</div>
        <div class="patient-gender">
          <span>性别：</span>{{ patientMsg.sex === "1" ? "男" : "女" }}
        </div>
        <div class="patient-age"><span>年龄：</span>{{ patientMsg.age }}</div>
        <div class="patient-telphone">
          <span>联系电话：</span>{{ patientMsg.linkmanTel }} /
          {{ patientMsg.homeTel }}
        </div>
        <div class="patient-diagnosis">
          <span>诊断：</span>{{ patientMsg.diagName }}
        </div>
        <div class="patient-state">
          <span>医保类型：</span>{{ patientMsg.yblx }}
        </div>
        <div class="patient-patientNumber">
          <span>门诊号：</span>{{ patientMsg.mcardNo }}
        </div>
        <div class="patient-recipeNumber">
          <span>处方号：</span>{{ patientMsg.clinicCode }}
        </div>
        <div class="patient-state">
          <span>状态：</span>
          <span v-if="patientMsg.preState === '0'">取消</span>
          <span v-else-if="patientMsg.preState === '1'">预约</span>
          <span v-else-if="patientMsg.preState === '2'">转入</span>
          <span v-else-if="patientMsg.preState === '3'">出院</span>
          <span v-else-if="patientMsg.preState === '4'">待床</span>
          <span v-else-if="patientMsg.preState === '5'">已通知</span>
          <span v-else-if="patientMsg.preState === '6'">无费退院</span>
          <span v-else>作废</span>
        </div>
        <div class="patient-inpatient-ward">
          <span>病区：</span>{{ patientMsg.nurseCellName }}
        </div>
      </div>
      <div class="patient-icon">
        <div>
          <Button
            v-if="patientMsg.state === '0'"
            type="primary"
            @click="registerClick"
            >登记</Button
          >
          <Button
            v-if="patientMsg.state === '1'"
            type="primary"
            @click="notRegisterClick"
            >取消登记</Button
          >
        </div>
        <div class="icon-360" @click="patient360">
          <i>{{ "" }}</i>
          <span class="patient-icon-span">患者360</span>
        </div>
      </div>
    </Container>
    <Container class="detail-msg">
      <div class="checkout">
        <div class="line-title">
          <div class="title-icon checkout-icon">
            <i>{{ "" }}</i>
            <span>检验</span>
          </div>
          <div class="query-reset-btn right-btn-container">
            <div
              v-for="(item, index) in buttonList"
              :key="index + '_'"
              class="form-item-btn"
              style="display: inline-block"
            >
              <Button
                :type="item.type"
                :icon="item.icon"
                :loading="item.loading"
                @click="item.handlerClick"
                >{{ item.label }}</Button
              >
            </div>
          </div>
        </div>
        <div class="detail-info">
          <div
            v-for="(item, index) in checkoutData"
            :key="index"
            class="checkout-box"
          >
            <div class="title-line">
              <div class="checkout-data-title">
                <i
                  class="el-icon-check"
                  :style="{
                    fontSize: '18px',
                    marginRight: '10px',
                    color: item.isShowAllComplate
                      ? 'rgb(0,176,80)'
                      : 'transparent',
                  }"
                  >{{ "" }}</i
                >
                <i class="checkout-data-icon">{{ "" }}</i>
                {{
                  `【${item.requesttime}】 [${item.doctrequestno}] ${item.examinaim}`
                }}
              </div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  flex-shrink: 0;
                  flex-grow: 0;
                "
              >
                <div class="jyProcess" style="margin-right: 120px">
                  检验进度 {{ item.jyProcess }}
                </div>
                <div class="extend-checkout-data" @click="extendInfo(item)">
                  {{ item.extend ? "收起" : "展开" }}
                  <i v-if="!item.extend" class="el-icon-arrow-down">{{ "" }}</i>
                  <i v-else class="el-icon-arrow-up">{{ "" }}</i>
                </div>
              </div>
            </div>
            <div v-show="item.extend" class="checkout-info">
              <el-table
                :data="item.ljysqdxxXmmxList"
                stripe
                style="width: 100%"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#f5f7fa',
                }"
              >
                <el-table-column prop="ylmc" label="检验项目">
                  <template slot-scope="scope">
                    <div>
                      <i
                        class="el-icon-circle-check"
                        :style="{
                          marginRight: '10px',
                          color: scope.row.executetime
                            ? '#2165f9'
                            : 'transparent',
                        }"
                        >{{ "" }}</i
                      >
                      <span>{{ scope.row.examinaim }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="executetime"
                  label="执行"
                  align="center"
                />
                <el-table-column
                  prop="receivetime"
                  label="收标本"
                  align="center"
                />
                <el-table-column
                  prop="checktime"
                  label="报告日期"
                  align="center"
                />
                <!-- <el-table-column prop="operation" label="操作" align="center">
                  <template slot-scope="scope">
                    <i class="get-detail" @click="visitDetail(scope.row)">{{ '' }}</i>
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </Container>
    <Container class="detail-msg">
      <div class="inspect">
        <div class="line-title">
          <div class="title-icon inspect-icon">
            <i>{{ "" }}</i>
            <span>检查</span>
          </div>
        </div>
        <div class="detail-info">
          <el-table
            :data="inspectData"
            stripe
            style="width: 100%"
            :header-cell-style="{
              'text-align': 'center',
              background: '#f5f7fa',
            }"
          >
            <el-table-column prop="jcxm" label="检查项目">
              <template slot-scope="scope">
                <div>
                  <i
                    class="el-icon-circle-check"
                    :style="{
                      marginRight: '10px',
                      color: scope.row.zxsj ? '#2165f9' : 'transparent',
                    }"
                    >{{ "" }}</i
                  >
                  <span>{{ scope.row.lxmcXs }}</span
                  ><span style="font-size: 12px">{{ scope.row.jcxm }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sqzt" label="状态" align="center">
              <!-- <template slot-scope="scope">{{ scope.row.state === '1' ? '收费' : '未收费' }}</template> -->
            </el-table-column>
            <el-table-column prop="sqsj" label="申请时间" align="center" />
            <el-table-column prop="yyrq" label="预约时间" align="center" />
            <el-table-column prop="zxsj" label="执行日期" align="center" />
            <!-- <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <i class="get-detail" @click="visitDetail(scope.row)">{{ '' }}</i>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
    </Container>
    <Container class="detail-msg">
      <div class="history">
        <div class="line-title">
          <div class="title-icon history-icon">
            <i>{{ "" }}</i>
            <span>历史记录</span>
          </div>
        </div>
        <div class="detail-info">
          <el-table
            :data="historyData"
            stripe
            style="width: 100%"
            :header-cell-style="{
              'text-align': 'center',
              background: '#f5f7fa',
            }"
          >
            <el-table-column prop="yyrq" label="预约时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.yyrq ? scope.row.yyrq : "暂无记录" }}
              </template>
            </el-table-column>
            <el-table-column prop="ryrq" label="入院时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.ryrq ? scope.row.ryrq : "暂无记录" }}
              </template>
            </el-table-column>
            <el-table-column prop="cyrq" label="出院时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.cyrq ? scope.row.cyrq : "暂无记录" }}
              </template>
            </el-table-column>
            <el-table-column prop="lastingDays" label="住院天数" align="center">
              <template slot-scope="scope">
                {{ showDays(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column prop="qxsj" label="取消时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.qxsj ? scope.row.qxsj : "暂无记录" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <Dialog
        :title="formtitle"
        :visible="dialogVisible"
        :footer-btns="[
          {
            text: '确定',
            type: 'primary',
            trigger: 'confirm',
          },
          {
            text: '关闭',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="_cancel('ruleForm')"
        @confirm="submitForm('ruleForm')"
      >
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="检验项目" prop="project">
            <el-select
              v-model="ruleForm.project"
              placeholder="请选择检验项目"
              size="mini"
              style="width: 200px"
              filterable
              clearable
            >
              <el-option
                v-for="item in projectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="执行时间" prop="excuteTime">
            <el-date-picker
              v-model="ruleForm.excuteTime"
              type="datetime"
              placeholder="选择执行时间"
              default-time="00:00:00"
              size="mini"
              style="width: 200px"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-form>
      </Dialog>
      <el-dialog title="添加备注" :visible.sync="dialogFormVisible">
        <el-form ref="addRemarkForm" :model="addRemarkForm" class="add-remark">
          <el-form-item label="备注：" label-width="400" prop="remark">
            <el-input v-model="addRemarkForm.remark" type="textarea" />
          </el-form-item>
          <!-- time -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="addRemarkFormClose">取 消</el-button>
          <el-button type="primary" size="mini" @click="addRemarkFormCommit">确 定</el-button>
          <div class="past-remark">
            <div v-for="(item, index) in pastRemark" :key="index" class="past-remark-item">
              <p>{{ item.createTime }}</p>
              <el-input v-model="item.beizhu" type="textarea" disabled />
            </div>
          </div>
        </div>
      </el-dialog>
    </Container>
  </ContainerGroup>
</template>

<script>
import { getVYqBrdjxx, specialSave, specialGetById, saveYQRegister, CancelYQRegister, saveOrUpdate, SelectBeiZhu } from '../../utils/apis/preparedness'

export default {
  name: "CentreforPreparednessDetail",
  data() {
    return {
      patientMsg: {},
      height: "fill",
      remarkBox: [],
      buttonList: [
        {
          label: "添加备注",
          type: "primary",
          handlerClick: this.addRemark,
          loading: false,
        },
        {
          label: "修改项目检验时间",
          type: "primary",
          handlerClick: this.handlerAdd,
          loading: false,
        },
      ],
      checkoutData: [],
      inspectData: [],
      historyData: [],
      dialogVisible: false,
      ruleForm: {
        project: "12739-新冠核酸",
        excuteTime: "",
      },
      projectList: [
        {
          value: "12739-新冠核酸",
          label: "新冠核酸",
        },
      ],
      preid: "",
      rules: {
        project: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      formtitle: "修改项目检验时间",
      dialogFormVisible: false,
      addRemarkForm: {
        remark: ''
      },
      // pastRemark: [
      //   {
      //     beizhu: 'test',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test1',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test2',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test3',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test4',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test5',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test6',
      //     createTime: '2021-11-16 10:20:07'
      //   },
      //   {
      //     beizhu: 'test7',
      //     createTime: '2021-11-16 10:20:07'
      //   }
      // ]
      pastRemark: []
    }
  },
  watch: {
    "$store.state.patientId": {
      handler(val) {
        this.preid = val;
        // this._getVYqBrdjxx();
      },
    },
  },
  activated() {
    this.preid = this.$route.query.preid;
    this._getVYqBrdjxx();
  },
  deactivated() {
    this.preid = "";
  },
  mounted() {
    console.log(this.$route.query);
  },
  methods: {
    _getVYqBrdjxx() {
      const params = {
        preid: this.preid,
      };
      getVYqBrdjxx(params).then((res) => {
        if (res.data.code === 200) {
          let tempData = [];
          this.patientMsg = res.data.data.vyqBrdjxx;
          tempData = res.data.data.ljysqdxxes;
          tempData.map((item) => {
            if (item.ljysqdxxXmmxList) {
              let tempArr = item.ljysqdxxXmmxList.filter((cItem) => {
                return cItem.executetime;
              });
              item.isShowAllComplate = item.jyPass;
              // if (item.ljysqdxxXmmxList.length !== 0 && tempArr.length === item.ljysqdxxXmmxList.length) {
              //   item.isShowAllComplate = true
              // } else {
              //   item.isShowAllComplate = false
              // }
            }
          });
          this.checkoutData = tempData;
          this.inspectData = res.data.data.erApplyOuts;
          this.historyData = res.data.data.historyState;
          this.checkoutData.forEach((item) => {
            this.$set(item, "extend", false);
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handlerAdd() {
      this.dialogVisible = true;
      this.getId();
    },
    _cancel(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const arr = that.ruleForm.project.split("-");
          const params = {
            clinicCode: that.patientMsg.clinicCode,
            examineName: arr[1],
            executionTime: that.ruleForm.excuteTime,
            code: arr[0],
          };
          specialSave(params).then((res) => {
            if (res.data.code === 200) {
              that.ruleForm = {
                project: "12739-新冠核酸",
                excuteTime: "",
              };
              that._cancel(formName);
              that.$message.success("修改成功");
            } else {
              that.$message.error(res.data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getId() {
      const params = {
        clinicCode: this.patientMsg.clinicCode,
      };
      specialGetById(params).then((res) => {
        if (res.data.code === 200) {
          this.ruleForm.project =
            res.data.data.examineName === null
              ? ""
              : res.data.data.code + "-" + res.data.data.examineName;
          this.ruleForm.excuteTime =
            res.data.data.executionTime === null
              ? ""
              : res.data.data.executionTime;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    extendInfo(item) {
      item.extend = !item.extend;
    },
    visitDetail(row) {
      alert(row.project);
    },
    patient360() {
      const url = `http://172.16.2.226:8041/Patient/VisitRecord?PageType=RECORDINFO&PatientNo=${this.patientMsg.clinicCode}`;
      window.open(url, "_blank");
    },
    showDays(row) {
      if (row.ryrq && row.cyrq) {
        if (!row.qxsj) {
          const startDay = row.ryrq.split("-");
          const endDay = row.cyrq.split("-");
          const startObj = new Date(
            startDay[0],
            Number(startDay[1]) - 1,
            startDay[2]
          );
          const endObj = new Date(endDay[0], Number(endDay[1]) - 1, endDay[2]);
          return Math.floor((endObj - startObj) / (1000 * 3600 * 24));
        } else {
          return "暂无记录";
        }
      } else {
        return "暂无记录";
      }
    },
    registerClick() {
      const params = {
        preid: this.preid,
        state: "1",
      };
      saveYQRegister(params).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("登记成功");
          this._getVYqBrdjxx();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    notRegisterClick() {
      const params = {
        preid: this.preid,
      };
      CancelYQRegister(params).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("取消登记成功");
          this._getVYqBrdjxx();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // addRemark() {
    //   this.dialogFormVisible = true;
    //   // 获取全部备注
    //   let parms = {
    //     preid:this.preid
    //   }
    //   SelectBeiZhu(parms).then(res =>{
    //     console.log(res)
    //     // if(res) {},
    //   });
    // },
    addRemark() {
      const params = {
        preid: this.preid
      }
      SelectBeiZhu(params).then(res => {
        if (res.data.code === 200) {
          this.pastRemark = res.data.data
          this.dialogFormVisible = true
        } else {
          this.$message.error('该患者历史备注列表获取失败！请稍后重试')
          this.dialogFormVisible = true
        }
      })
    },
    addRemarkFormClose() {
      this.$refs.addRemarkForm.resetFields();
      this.dialogFormVisible = false;
    },
    addRemarkFormCommit() {
      if(this.addRemarkForm.remark ==null || this.addRemarkForm.remark ==undefined || this.addRemarkForm.remark =="")
      {
        this.$message.error("请输入备注信息！")
        return;
      }
      const params = {
        preid: this.preid,
        beizhu: this.addRemarkForm.remark,
      };
      console.log(params);
      saveOrUpdate(params).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.dialogFormVisible = false;
          this.$refs.addRemarkForm.resetFields();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.remark-model {
  padding: 20px 0;
  box-sizing: border-box;
}
.remark-content {
  display: flex;
}
.remark-time {
  width: 200px;
  border: 1px solid cadetblue;
}
.remark-text {
}
.container.detail-msg {
  padding: 0;
}
.container.basic-msg {
  background: linear-gradient(to bottom, #c1e2fc, #87c7fc);
  padding: 10px;
  display: flex;
  margin-top: 0;
  position: relative;
  .left {
    flex: 0 0 90px;
    width: 90px;
    height: 64px;
    background-color: #2165f9;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 26px;
    .text-box {
      .department {
        font-size: 16px;
      }
      .doctor {
        font-size: 12px;
      }
      .time {
        font-size: 12px;
      }
    }
  }
  .right {
    color: #343434;
    font-size: 14px;
    flex: 1;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    line-height: 30px;
    div {
      margin-right: 40px;
    }
    span {
      font-weight: bold;
    }
  }
  .patient-btn {
    position: absolute;
    right: 100px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .patient-icon {
    position: absolute;
    right: 24px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-360 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      margin-left: 20px;
      i {
        display: inline-block;
        height: 22px;
        width: 22px;
        background-image: url("../../assets/image/patient360.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        margin-right: 4px;
      }
      .patient-icon-span {
        font-size: 13px;
        color: #f5b77c;
        font-weight: bold;
      }
    }
  }
}
.line-title {
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5b77c;
  color: #fff;
}
.title-icon {
  display: flex;
  align-items: center;
  i {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 12px;
  }
}
.checkout-icon {
  i {
    background-image: url("../../assets/image/checkout.png");
  }
}
.inspect-icon {
  i {
    background-image: url("../../assets/image/inspect.png");
  }
}
.history-icon {
  i {
    background-image: url("../../assets/image/history.png");
  }
}
.detail-info {
  padding: 10px;
}
.title-line {
  display: flex;
  justify-content: space-between;
  background-color: #eeeeee;
  padding: 10px;
  // margin: 10px 0;
  .checkout-data-title {
    color: #333;
    font-size: 14px;
    .checkout-data-icon {
      display: inline-block;
      height: 14px;
      width: 14px;
      background-image: url("../../assets/image/title-icon (2).png");
      background-size: 100% 100%;
    }
  }
  .extend-checkout-data {
    cursor: pointer;
    color: #2165f9;
    font-size: 14px;
  }
}
.checkout-info {
  margin-bottom: 10px;
}
.get-detail {
  display: inline-block;
  background-image: url("../../assets/image/title-icon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.form-item-btn {
  margin-right: 8px;
}
/deep/ .el-dialog{
  height: 840px;
}
.past-remark{
  margin-top: 20px;
  padding: 0 8px;
  height: 520px;
  overflow-y: auto;
  p{
    margin-bottom: 8px;
  }
  .past-remark-item{
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDFE6;
    margin-bottom: 10px;
  }
}
/deep/ .add-remark .el-form-item .el-form-item__label{
  font-size:18px;
}
</style>
